<template>
  <div class="work-item" @click="handleDetail">
    <div class="content">
      <div class="title">
        <labelType :type="props.item.workStatus"></labelType>
        <span class="dept ellipsis">{{props.item.deptName}}</span>
      </div>
      <div class="name ellipsis-2">{{props.item.workTitle}}</div>
    </div>
    <div class="shrink-0">
      <img class="more" src="@/assets/icon/icon-more.png" alt="">
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import labelType from "./labelType.vue"

const props = defineProps<{
  item: TypeVidItem
}>()

const router = useRouter()

const emit = defineEmits([])
const handleDetail = () => {
  router.push('/keyWork/detail?id='+props.item.id)
}

</script>

<style lang="less" scoped>
.work-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 8px;
  background: #ffffff;
  // height: 68px;
  margin-bottom: 10px;
  padding: 12px 13px;

  .content {
    color: #212121;
    font-size: 14px;
    line-height: 23px;

    .title{
      color: #21212199;
      font-size: 13px;
      display: flex;
      align-items: center;
    }
    .work-type{
      flex-shrink: 0;
    }
    .dept{
      display: inline-block;
      max-width: 260px;
    }
    .name{
      margin-top: 6px;
    }
  }

  .more{
    width: 12px;
    height: 24px;
  }
}
</style>
